<template>
  <div class="text">
    <div class="title">
      {{ title }}
      <slot name="right-btn"></slot>
    </div>

    <div class="time">
      {{ time }}
      <slot name="center-btn"></slot>
    </div>

    <div class="status">
     <el-button type="warning" v-if="props.status">{{ status }}</el-button>
    <slot name="left-btn"></slot>
    </div>
  </div>

  <div class="page-close-box">
    <el-button link type="primary" @click="$router.go(-1)">
      <el-icon><Close /></el-icon>
    </el-button>
  </div>
</template>
<script lang="ts" setup>
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  time: {
    type: String,
    default: "",
  },
  status: {
    type: String,
    default: "",
  },
});
</script>
<style lang="scss" scoped>
.text {
  display: flex;
  justify-content: space-between;
  border-bottom: 3px solid #409eff;

  // width:100%;
}
.title {
  font-weight: 600;
  font-size: 16px;
  color: #383838;
  line-height: 28px;
  padding-bottom: 5px;
}
.time {
  font-weight: 500;
  font-size: 25px;
  padding-bottom: 5px;
  line-height: 28px;
  justify-content: center;
}

.status {
  font-weight: 600;
  font-size: 16px;
  color: #383838;
  line-height: 28px;
  padding-bottom: 5px;
  margin-right:10px;
}
.page-close-box {
  position: absolute;
  background: #0092ff;
  transform: rotate(45deg);
  height: 50px;
  width: 50px;
  right: -25px;
  top: -25px;
  text-align: center;

  .el-button {
    transform: rotate(-45deg);
    color: white;
    margin-top: 30px;
  }
}
</style>
